<!-- polls/templates/polls/detail.html -->
{% extends "polls/base.html" %}

{% block title %}{{ question.question_text }} - 投票{% endblock %}

{% block content %}
<div class="row justify-content-center animate__animated animate__fadeIn">
    <div class="col-lg-8">
        <div class="card">
            <div class="card-header text-white">
                <div class="d-flex justify-content-between align-items-center">
                    <h2 class="mb-0">{{ question.question_text }}</h2>
                    {% if question.days_remaining is not None %}
                    <span class="countdown-badge bg-warning text-dark">
                        <i class="bi bi-clock"></i> 剩余 {{ question.days_remaining }} 天
                    </span>
                    {% endif %}
                </div>
            </div>
            
            <div class="card-body">
                {% if error_message %}
                <div class="alert alert-danger animate__animated animate__shakeX" role="alert">
                    <i class="bi bi-exclamation-triangle-fill me-2"></i>{{ error_message }}
                </div>
                {% endif %}
                
                {% if not question.is_currently_active %}
                <div class="alert alert-warning" role="alert">
                    <i class="bi bi-info-circle-fill me-2"></i>
                    该投票已{% if question.pub_date > timezone.now %}尚未开始{% else %}结束{% endif %}，无法投票
                </div>
                {% endif %}
                
                <form action="{% url 'polls:vote' question.id %}" method="post" 
                      {% if not question.is_currently_active %}class="pe-none" style="opacity: 0.6"{% endif %}>
                    {% csrf_token %}
                    <div class="list-group mb-4">
                        {% for choice in question.choice_set.all %}
                        <label class="list-group-item d-flex align-items-center py-3">
                            <input class="form-check-input flex-shrink-0 me-3" type="radio" 
                                   name="choice" id="choice{{ forloop.counter }}" 
                                   value="{{ choice.id }}" {% if not question.is_currently_active %}disabled{% endif %}>
                            <span class="flex-grow-1">{{ choice.choice_text }}</span>
                        </label>
                        {% endfor %}
                    </div>
                    
                    <div class="d-grid gap-2 d-md-flex justify-content-md-end">
                        <a href="{% url 'polls:index' %}" class="btn btn-outline-secondary me-md-2">
                            <i class="bi bi-arrow-left"></i> 返回列表
                        </a>
                        <button type="submit" class="btn btn-primary" {% if not question.is_currently_active %}disabled{% endif %}>
                            <i class="bi bi-check-circle"></i> 提交投票
                        </button>
                    </div>
                </form>
            </div>
            
            <div class="card-footer text-muted">
                <div class="d-flex justify-content-between">
                    <small>
                        <i class="bi bi-calendar-event me-1"></i>
                        发布时间: {{ question.pub_date|date:"Y年m月d日 H:i" }}
                    </small>
                    {% if question.end_date %}
                    <small>
                        <i class="bi bi-clock me-1"></i>
                        截止时间: {{ question.end_date|date:"Y年m月d日 H:i" }}
                    </small>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}